import React from './kkkreact-Diff/index.js';
import ReactDOM ,{useState,useReducer,useMemo,useCallback}from './kkkreact-Diff/react-dom.js';
import Component from './kkkreact-Diff/Component.js';

function DiffPage() {
    const reducer = (state,action) => {
        switch(action.type) {
            case 'increment' : return state + 1;
            case 'decrement' : return state - 1;
        }
    }
    const [num1,num1Dispatch] = useReducer(reducer, 1)
    const [num2,num2Dispatch] = useReducer(reducer, 100)
    //===============
    const [state,setPatch] = useState(1)
    const [temp,setTempDispatch] = useState(100)
    const [count,setCount] = useState(0)
    //===========
    function Child() {
        if(count % 2) {
            return  React.createElement(
                'ul',
                {},
                React.createElement(
                    'li',
                    {key:'A'},
                    'A'
                ),
                React.createElement(
                    'li',
                    {key:'B'},
                    'B'
                ),
                React.createElement(
                    'li',
                    {key:'C'},
                    'C'
                ),
                React.createElement(
                    'li',
                    {key:'D'},
                    'D'
                ),
                React.createElement(
                    'li',
                    {key:'E'},
                    'E'
                ),  
                React.createElement(
                    'li',
                    {key:'F'},
                    'F'
                ),          
              )
          }else {
            return  React.createElement(
              'ul',
              {},
              React.createElement(
                  'li',
                  {key:'A'},
                  'A'
              ),
              React.createElement(
                  'li',
                  {key:'C'},
                  'C'
              ),
              React.createElement(
                  'li',
                  {key:'E'},
                  'E'
              ),
              React.createElement(
                  'li',
                  {key:'B'},
                  'B'
              ),   
              React.createElement(
                  'li',
                  {key:'G'},
                  'G'
              ),           
            )        
          }
      }
    
    let addClick = useCallback(() => {
        let sum = 0;
        for(let i = 1; i < 10 + count; i++) {
            sum += 2 ^ i;
        }
        return sum
    },[count])
    function Mycallback(props) {
        return React.createElement (
            'button',
            {onClick:() => {console.log(props.addClick())}},
            1
        )
    }
    let mymemo = useMemo(() => {
        console.log('compute')
        let sum = 0;
        for(let i = 1; i < 10 + count; i++) {
            sum += 2 ^ i;
        }
        return sum
    },[count])

    return React.createElement (
        'div',
        {className:"border"},
        React.createElement(
            'button',
            {onClick:()=>{setCount(count + 1);}},
            count,
            React.createElement(
                Child,
                {},
                null
            ),
          ),
        React.createElement(
            'button',
            {onClick:() => {
                num1Dispatch({type:'increment'});
                num1Dispatch({type:'increment'});
                num1Dispatch({type:'increment'});
                num2Dispatch({type:'decrement'})
            }},
            num1,'///',num2
          ),
      //================
        React.createElement(
            'button',
            {onClick:() => {setPatch((state) => {return state + 1});setTempDispatch(temp - 1)}},
            state,'///',temp
        ),
      //====================
        React.createElement(
            'p',
            {},
            mymemo
        ),
        React.createElement(
            Mycallback,
            {addClick: addClick},
            null
        ),
      )
}
const vnode = React.createElement(
    DiffPage,
    {},
    null
)
ReactDOM.render(vnode, document.getElementById("root"));
